<template>
	<view>
		<view class="content">
			<view class="list" >
				<u-empty v-if="!storeList.length" mode="list"></u-empty>
				<u-radio-group v-model="storeBasicId">
          <view v-for="(item, index) in storeList" :key="item.storeBasicId" class="item boxShadow"
                @click="storeBasicId=item.storeBasicId">
            <view class="f-c-fs">
              <view
                  :class="item.storeBasicTypeStr=='直营门店'?'color1':item.storeBasicTypeStr=='加盟门店'?'color3':item.storeBasicTypeStr=='合作门店'?'color4':''"
                  class="color color1">{{ item.storeBasicTypeStr }}
              </view>
            </view>
            <view class="item-title f-c-sb">
              <view>{{ item.storeBasicName }}</view>
              <u-radio :size="50" shape="square" :name="item.storeBasicId"></u-radio>
            </view>
          </view>
        </u-radio-group>
			</view>
			<view class="lxdBtn" @click="affirm"  v-if="storeList.length">确定</view>
		</view>
	</view>
</template>

<script>
import {getStoreList} from '@/api/index'
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
      storeList: [],
      storeBasicId: ''
    }
  },
  computed: {
    ...mapGetters(["userInfo"]),

  },
  onLoad() {
    this.storeBasicId = this.userInfo.storeBasicId
    this.getlist()
  },
  methods: {
    affirm() {
      var data = this.userInfo
      this.storeList.forEach((val, index) => {

        if (val.storeBasicId == this.storeBasicId) {
						for(const key in val){
							data[key]=val[key]
						}
						this.$store.commit('loginStore',data)
					}
				});
				uni.navigateBack({
					delta:1
				})
				// loginStore()
			},

			getlist(){
				getStoreList().then(res=>{
					this.storeList=res.data
					this.storeList.forEach((val, index) => {
						val.checkbox = false;
						if(val.storeBasicId==this.userInfo.storeBasicId){
							val.checkbox = true;
						}
						
					});
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content{
		padding-top: 30rpx;
	}
.list {
  width: 100%;
  margin-bottom: 200px;

  .item {
    width: 660rpx;
    background: #ffffff;
    border-radius: 18rpx;
    margin: 23rpx auto;
    padding: 30rpx;
    box-sizing: border-box;

    .color {
      width: 110rpx;
      height: 36rpx;
      opacity: 1;
      background: #177fff;
      border-radius: 6rpx;
      font-size: 24rpx;
      font-weight: 700;
      text-align: center;
      color: #ffffff;
      line-height: 36rpx;
      margin-right: 18rpx;

      &.color1 {
				background: #177fff;
			}
			&.color2 {
				background: #ff6738;
			}
			&.color3 {
				background: #f54170;
			}
			&.color4 {
				background: #2db2ad;
			}
		}
	}
	.item-title {
		font-size: 28rpx;
		font-weight: 700;
    color: #131313;
    margin: 20rpx 0;
  }

  .info {
    font-size: 24rpx;
    font-weight: 500;
    color: #666666;
    line-height: 36rpx;
  }
}

  .lxdBtn {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%);
  }
</style>
